<template>
  <div>
    <van-nav-bar
      title="购物车"
      class="w"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-checkbox-group v-model="result" ref="checkboxGroup" @change="change">
      <van-row class="ww" v-for="item in $store.state.shopcar" :key="item.id">
        <van-col span="3">
          <van-checkbox :name="item"></van-checkbox>
        </van-col>
        <van-col span="21">
          <van-swipe-cell>
            <van-card
              :price="item.minPrice"
              :desc="item.name"
               class="goods-card"
              :thumb="item.pic"
             >
              <template #footer>
                <van-stepper
                  v-model="item.num"
                  @plus="plus(item.id)"
                  @minus="min(item.id)"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="remove(item.id)"
              />
            </template>
          </van-swipe-cell>
        </van-col>
      </van-row>
    </van-checkbox-group>
    <van-submit-bar class="er" :price="allprice * 100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
      <van-button class="sx" @click="del">删除所选</van-button>
    </van-submit-bar>
    <van-empty
      v-show="show"
      class="custom-image"
      image="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1503682516,4111441533&fm=26&gp=0.jpg"
    />
    <!-- 猜你喜欢 -->
    <div class="cai">猜你喜欢</div>
    <Renqi />
    <!-- 底部导航 -->
    <Button />
  </div>
</template>
<script>
import Button from "../../components/nav/button-nav";
import Renqi from "../../components/list/ren";
export default {
  components: {
    Button,
    Renqi,
  },
  data() {
    return {
      show: false,
      active: 2,
      result: [],
      checked: false,
    };
  },
  mounted() {
    // 如果购物车没有数据就让空状态显示,如果有数据就让它隐藏
    if (this.$store.state.shopcar.length == 0) {
      this.show = true;
    } else {
      this.show = false;
    }
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 删除
    remove(id) {
      this.result.forEach((item, index) => {
        if (item.id == id) {
          this.result.splice(index, 1);
        }
      });
      this.$store.commit("remove", id);
    },
    // 加
    plus(id) {
      this.$store.commit("plus", id);
    },
    // 减
    min(id) {
      this.$store.commit("min", id);
    },
    // 全选
    change() {
      if (
        this.result.length == this.$store.state.shopcar.length &&
        this.result.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    checkall() {
      if (this.checked == true) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    // 删除所选
    del() {
      let ids = [];
      this.result.forEach((item) => {
        ids.push(item.id);
      });
      this.$store.commit("del", ids);
      this.result = [];
    },
  },
  // 计算总价
  computed: {
    allprice() {
      var sum = 0;
      this.result.forEach((item) => {
        sum += item.num * item.minPrice;
      });
      return sum;
    },
  },
  // 批量删除
  del() {
    let ids = [];
    this.result.forEach((item) => {
      ids.push(item.id);
    });
    this.$store.commit("del", ids);
    this.result = [];
  },
};
</script>
<style  scoped>
.w {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.cai {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.custom-image .van-empty__image {
  width: 100px;
  height: 100px;
}
.custom-image {
  margin-top: 100px;
}
.ww {
  margin-top: 60px;
}
.delete-button {
  width: 100%;
  height: 100%;
}
.er {
  position: fixed;
  bottom: 48px;
}
.sx {
  background: none;
  border: none;
}
</style>